<template>
  <div class="login-page-container">
    <!-- 添加提示元素 -->
    <div v-if="showSuccessMessage" class="success-message">登录成功</div>
    <div class="user-login-wrapper">
      <div class="user-login">
        <h2>登录</h2>
        <form @submit.prevent="handleLogin">
          <div class="input-group">
            <input v-model="username" type="text" placeholder="用户名" required>
          </div>
          <div class="input-group">
            <input v-model="password" type="password" placeholder="密码" required>
          </div>
          <button type="submit">登录</button>
        </form>
        <!-- 添加注册按钮 -->
        <nav class="nav button-group">
          <router-link to="/register">->注册</router-link>
        </nav>
      </div>
    </div>
    <!-- 添加欢迎文本 -->
     <br>
    <p>欢迎来到我的个人博客网站，本网站由“笑不合了”授权</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/userStore';

const username = ref('');
const password = ref('');
const router = useRouter();
const userStore = useUserStore();
const showSuccessMessage = ref(false);

const handleLogin = () => {
  // 这里可以添加实际的登录验证逻辑
  userStore.login(username.value);
  showSuccessMessage.value = true;
  setTimeout(() => {
    showSuccessMessage.value = false;
    router.push('/blog');
  }, 500);
};
</script>

<style scoped>
.login-page-container {
  min-height: 100vh; 
  width: 100vw; 
  padding: 0; 
  margin: 0; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden; 
  /* 添加背景图片 */
  background-image: url('@/assets/bg.png'); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
}

.user-login-wrapper {
  display: block; 
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 33.33%; 
  max-width: 500px; 
  box-sizing: border-box; 
}

.input-group {
  margin-bottom: 15px;
}

.input-group input {
  width: 100%; 
  padding: 8px;
  box-sizing: border-box;
}

.user-login h2 {
  text-align: left;
}

.button-group {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
  justify-content: flex-end; /* 按钮靠右对齐 */
}

/* 修改登录按钮样式，放大 0.5 倍 */
.user-login form button[type="submit"] {
  font-size: 1.25em; /* 字体大小在原有基础上增加 50% */
  padding: 10px 20px; /* 假设原内边距为 8px 16px，增加 25% */
}

.success-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 1000;
}
</style>